<template>
    <el-card class="mt15 mb15">
        <!-- 第一行 -->
        <div class="search-filter">
            <el-row :gutter="20">
                <el-col :span="6">
                    <sitem label="当前职位：">
                        <el-input
                            slot="item"
                            v-model="listQuery.jobName"
                            placeholder="请输入关键字"
                            @input="handleFilter"
                        />
                    </sitem>
                </el-col>
                <el-col :span="6">
                    <sitem label="姓名：">
                        <el-input
                            slot="item"
                            v-model="listQuery.userName"
                            placeholder="请输入关键字"
                            @input="handleFilter"
                        />
                    </sitem>
                </el-col>
                <el-col :span="6">
                    <sitem label="性别：">
                        <el-select
                            slot="item"
                            v-model="listQuery.sex"
                            placeholder="选择"
                            clearable
                            @change="handleFilter"
                        >
                            <el-option
                                v-for="item in sex"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </sitem>
                </el-col>
                <el-col :span="6">
                    <sitem label="年龄：" range>
                        <el-input
                            slot="low"
                            v-model="listQuery.minAge"
                            oninput="value=value.replace(/[^\d]/g,'')"
                            max-length="9"
                            placeholder="填写整数"
                        />
                        <el-input
                            slot="high"
                            v-model="listQuery.maxAge"
                            oninput="value=value.replace(/[^\d]/g,'')"
                            max-length="9"
                            placeholder="填写整数"
                            @keyup.enter.native="handleFilter"
                        />
                    </sitem>
                </el-col>
                <el-col :span="6">
                    <sitem label="婚姻状况：">
                        <el-select
                            slot="item"
                            v-model="listQuery.maritalStatus"
                            placeholder="选择"
                            clearable
                            @change="handleFilter"
                        >
                            <el-option
                                v-for="item in maritalStatus"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </sitem>
                </el-col>
                <el-col :span="6">
                    <sitem label="工作经验：">
                        <el-select
                            slot="item"
                            v-model="listQuery.experience"
                            placeholder="选择"
                            clearable
                            @change="handleFilter"
                        >
                            <el-option
                                v-for="item in experience"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </sitem>
                </el-col>
                <!-- <el-col :span="6">
                  <sitem label="最高学历：">
                    <el-select
                      slot="item"
                      v-model="listQuery.eduLevel"
                      placeholder="选择"
                      clearable
                      @change="handleFilter"
                    >
                      <el-option
                        v-for="item in eduLevels"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </sitem>
                </el-col> -->
                <el-col :span="6">
                    <sitem label="期望月薪：">
                        <el-select
                            slot="item"
                            v-model="listQuery.salary"
                            placeholder="选择"
                            clearable
                            @change="handleFilter"
                        >
                            <el-option
                                v-for="item in salary"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </sitem>
                </el-col>
                <el-col :span="6">
                    <sitem label="期望行业：">
                        <el-cascader slot="item" v-model="listQuery.workIndustry" :options="tradeData"
                                     @change="handleFilter"/>
                    </sitem>
                </el-col>
                <el-col :span="6">
                    <sitem>
                        <el-button
                            slot="item"
                            v-waves
                            class="el-icon-search"
                            type="primary"
                            @click="handleFilter"
                        > 搜索
                        </el-button>
                    </sitem>
                </el-col>
            </el-row>
        </div>

        <!-- 第三行——删除按钮 -->
        <div class="mb15">
            <el-button type="primary" icon="el-icon-download" @click="exportResume">导出简历</el-button>
            <el-button type="primary" icon="el-icon-user" @click="exportExcel">导出名单</el-button>
            <!-- <el-button type="danger" icon="el-icon-document-delete" @click="delMultiple">删除</el-button> -->
        </div>
        <!-- / 第三行——删除按钮 -->

        <!-- table表格 -->
        <el-table ref="table" :data="list" :stripe="true" style="width: 100%">
            <el-table-column
                type="selection"
                width="55"
            />
            <!-- 序号 -->
            <el-table-column
                type="index"
                width="50"
                label="序号"
                align="center"
            />
            <el-table-column align="center" label="姓名" width="100px">
                <template slot-scope="{ row }">
                    <el-button type="text" @click.native="viewInfo(row)">{{ row.userInfo.name }}</el-button>
                </template>
            </el-table-column>

            <el-table-column align="center" prop="gender" label="性别" width="80px">
                <template slot-scope="{ row }">
                    {{ row.userInfo.sex == 1 ? '男' : '女' }}
                </template>
            </el-table-column>

            <!-- 年龄 -->
            <el-table-column align="center" prop="userInfo.age" label="年龄" width="80px"/>


            <!-- 婚姻状况 -->
            <el-table-column
                align="center"
                label="婚姻状况"
                width="120px"
            >
                <template slot-scope="{ row }">
                    {{ row.userInfo.maritalStatus| maritalStatusFilter }}
                </template>
            </el-table-column>


            <!-- 工作经验/年 -->
            <el-table-column
                align="center"
                prop="userInfo.workYears"
                label="工作经验/年"
                width="120px"
            />

            <!-- 联系方式 -->
            <el-table-column
                align="center"
                prop="userInfo.phone"
                label="联系方式"
                width="150px"
            />

            <!-- 现居地址 -->
            <el-table-column
                align="center"
                prop="userInfo.liveCity_dictText"
                label="现居住地址"
                width="180px"
            />

            <!-- 毕业院校 -->
            <el-table-column
                align="center"
                label="毕业院校"
                width="150px"
            >
                <template slot-scope="{ row }">
                    <template v-if="row.eduInfo.length">
                        {{ row.eduInfo[0].schoolName }}
                    </template>
                </template>
            </el-table-column>
            <!-- 最高学历 -->
            <el-table-column
                align="center"
                label="最高学历"
                width="100px"
            >
                <template slot-scope="{ row }">
                    <template v-if="row.eduInfo.length">
                        {{ row.eduInfo[0].eduLevel | eduLevelFilter }}
                    </template>
                </template>
            </el-table-column>

            <el-table-column
                align="center"
                label="在校时间"
                width="200px"
            >
                <template slot-scope="{ row }">
                    <template v-if="row.eduInfo.length">
                        {{ row.eduInfo[0].startEduTime + '至' + row.eduInfo[0].endEduTime }}
                    </template>
                </template>
            </el-table-column>

            <!-- 政治面貌 -->
            <el-table-column
                align="center"
                prop="userInfo.political"
                label="政治面貌"
                width="150px"
            />

            <!-- 上一家公司 -->
            <el-table-column
                align="center"
                label="当前公司"
                width="100px"
            >
                <template slot-scope="{ row }">
                    <template v-if="row.workInfo.length">
                        {{ row.workInfo[0].companyName }}
                    </template>
                </template>
            </el-table-column>

            <!-- 当前职位 -->
            <el-table-column
                align="center"
                label="当前职位"
                width="100px"
            >
                <template slot-scope="{ row }">
                    <template v-if="row.workInfo.length">
                        {{ row.workInfo[0].positionName_dictText | positionFilter }}
                    </template>
                </template>
            </el-table-column>

            <!-- 期望月薪 -->
            <el-table-column
                align="center"
                label="期望月薪"
                width="200px"
            >
                <template slot-scope="{ row }">
                    {{ row.workIntention|moneyFilter }}
                </template>
            </el-table-column>

            <!-- 期望行业 -->
            <el-table-column
                align="center"
                label="期望行业"
                width="200px"
            >
                <template slot-scope="{ row }">
                    {{ row.workIntention | workIntentionFilter }}
                </template>
            </el-table-column>

            <!-- 证书-->
            <el-table-column
                align="center"
                label="证件"
                width="100px"
            >
                <template slot-scope="{ row }">
                    {{ row.certificateList | certificateFilter }}
                </template>
            </el-table-column>


            <el-table-column
                align="center"
                label="简历更新时间"
                width="200px"
            >
                <template slot-scope="{ row }">
                    {{ row.cvResumeList[0].updateTime ? row.cvResumeList[0].updateTime : row.cvResumeList[0].createTime }}
                </template>
            </el-table-column>

            <el-table-column
                align="center"
                label="注册时间"
                width="200px"
            >
                <template slot-scope="{ row }">
                    {{ row.userInfo.createTime }}
                </template>
            </el-table-column>
            <!-- 附件简历 -->
            <!-- <el-table-column align="center" label="附件简历" width="100px">
              <template slot-scope="{ row }">
                <span v-if="row.resume === 1">无</span>
                <el-button v-else type="text">简历</el-button>
              </template>
            </el-table-column> -->

            <!-- 职位浏览量-->
            <el-table-column
                align="center"
                prop="browseCount"
                label="职位浏览量"
                width="120px"
            />
            <!-- 投递率-->
            <el-table-column
                align="center"
                label="投递率"
                width="80px"
            >
                <template slot-scope="{ row }">
                    {{ row.deliveryRate * 100 }}%
                </template>
            </el-table-column>
            -->

            <!-- 操作 -->
            <el-table-column label="操作" width="180" fixed="right" align="center">
                <template slot-scope="{row}">
                    <el-button type="text" @click.native="viewInfo(row)">查看简历</el-button>
                    <el-button type="text" @click="downLoadItem(row)">下载简历</el-button>
                    <!-- <el-button type="text" @click="disItem(row)">
                      <template v-if="row.banFlag">
                        <span class="el-link el-link--success">启用</span>
                      </template>
                      <template v-else>
                        <span class="el-link el-link--warning">违规禁用</span>
                      </template>
                    </el-button> -->
                </template>
            </el-table-column>
            <!-- / 操作 -->
        </el-table>
        <!-- / table表格 -->

        <pagination
            v-show="total>0"
            :total="total"
            next-text="下一页"
            :page-sizes="[5, 10, 20, 50,100]"
            layout="prev, pager, next, sizes, jumper"
            :page.sync="listQuerytrue.pageNo"
            :limit.sync="listQuerytrue.pageSize"
            @pagination="getList"
        />

        <pdf-dialog ref="pdfDialog" @transportShow="transportShow" @employShow="employShow" @markRes="markRes"
                    @interviewShow="interviewShow" @refresh="refresh"/>
        <forward-drawer ref="transportDrawer" @refresh="refresh"/>
        <interview-results-drawer ref="resDrawer" @refresh="refresh"/>
        <interview-drawer ref="interviewDrawer" @refresh="refresh"/>
        <employ-drawer ref="employDrawer" @refresh="refresh"/>
    </el-card>
</template>

<script>
import {getUserListInfo, exportTalentList} from '@/api/talent-pool'
import {exportResume} from '@/api/common'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import PdfDialog from '@/components/PdfDialog'
import sitem from '@/components/searchItem'
import forwardDrawer from '@/components/CurriculumVitaeStateDrawer/forwardDrawer.vue'
import interviewResultsDrawer from '@/components/CurriculumVitaeStateDrawer/interviewResultsDrawer.vue'
import interviewDrawer from '@/components/CurriculumVitaeStateDrawer/interviewDrawer.vue'
import employDrawer from '@/components/CurriculumVitaeStateDrawer/employDrawer.vue'
import {mapState} from 'vuex'
import {exportFile} from '@/utils/export'
import store from '@/store'

export default {
    name: 'ComplexTable',
    components: {Pagination, PdfDialog, sitem, forwardDrawer, interviewResultsDrawer, interviewDrawer, employDrawer},
    directives: {waves},
    data() {
        return {
            tableKey: 0,
            list: null,
            total: 0,
            listLoading: true,
            listQuery: {
                jobName: '',
                userName: '',
                sex: '',
                minAge: '',
                maxAge: '',
                maritalStatus: '',
                experience: '', // 自定义的
                eduLevel: '',
                salary: '', // 自定义的
                workIndustry: ''
            },
            listQuerytrue: {
                pageNo: 1,
                pageSize: 10,
                sort: false,
                minWorkYear: '',
                maxWorkYear: '',
                minMoney: '',
                maxMoney: ''
            },
            tradeData: []// 行业数据
        }
    },
    computed: {
        ...mapState({
            eduLevels: state => state.app.eduLevels,
            sex: state => state.app.sex,
            experience: state => state.app.experience,
            maritalStatus: state => state.app.maritalStatus,
            salary: state => state.app.salary
        })
    },
    filters: {
        maritalStatusFilter(e) {
            switch (e) {
                case 0:
                    return '未婚'
                    break
                case 1:
                    return '已婚已育'
                    break
                case 2:
                    return '已婚未育'
                    break
                case 3:
                    return '离异'
                    break
                default:
                    break
            }
        },
        eduLevelFilter(e) {
            switch (e) {
                case 0:
                    return '初中'
                    break
                case 1:
                    return '高中'
                    break
                case 2:
                    return '中专/中技'
                    break
                case 3:
                    return '大专'
                    break
                case 4:
                    return '本科'
                    break
                case 5:
                    return '硕士'
                    break
                case 6:
                    return 'MBA/EMBA'
                    break
                case 7:
                    return '博士'
                    break
                default:
                    break
            }
        },
        certificateFilter(e) {
            if (!e) return ''
            const certificates = e.map(item => {
                return item.name
            })
            return certificates.join(',')
        },
        workIntentionFilter(e) {
            if (!e) return ''
            const workIndustrys = e.map(item => {
                const d = item.workIndustry_dictText.split(',')
                return d[d.length - 1]
            })
            const newW = Array.from(new Set(workIndustrys))
            return newW.join(',')
        },
        moneyFilter(e) {
            if (!e) return ''
            const moneys = e.map(item => {
                return item.minMoney + '-' + item.maxMoney
            })
            const newM = Array.from(new Set(moneys))
            return newM.join(',')
        },
        positionFilter(e) {
            console.log(e)
            const arr = e.split(',')
            return arr[arr.length - 1]
        }
    },
    async created() {
        const params = this.$route.params
        if (params.id) {
            this.listQuery.jobName = params.jobName
            this.listQuerytrue.jobId = params.id
            this.listQuerytrue.jobName = params.jobName
        }
        this.getList()

        // 行业数据
        if (this.$store.state.app.tradeData.length === 0) {
            const res = await store.dispatch('app/getTrade', 'industry')
            this.tradeData = JSON.parse(JSON.stringify(res.result))
            if (this.tradeData[0].label !== '全部') {
                this.tradeData.unshift({label: '全部', value: ''})
            }
        } else {
            this.tradeData = JSON.parse(JSON.stringify(this.$store.state.app.tradeData))
            if (this.tradeData[0].label !== '全部') {
                this.tradeData.unshift({label: '全部', value: ''})
            }
        }
    },
    methods: {
        refresh() {
            this.getList()
            if (this.$refs.pdfDialog.dialogVisible && this.$refs.pdfDialog.showHis) {
                this.$refs.pdfDialog.getList()
            }
        },
        // 查看信息
        viewInfo(row) {
            row.jobInfo = row.job// 重命名职位信息
            row.resumeId = row.reId // 重命名简历id
            row.lanType = row.cvResumeList[0].lanType// 投递的简历语言类型  0 中文 1英文
            row.type = row.cvResumeList[0].type// 投递的简历文件类型 0 在线 1附件
            row.showAll = true// 显示所有简历
            row.notransport = true;
            this.$refs.pdfDialog.show(row, true)
        },
        // 发送简历
        transportShow(e) {
            console.log(e)
            this.$refs.transportDrawer.show(e.name, e.jobName, e.reId)
        },
        // 再次面试
        interviewShow(e) {
            console.log(e)
            this.$refs.interviewDrawer.show(e.name, e.id, e.jobName, e.jobId, e.companyId, e.reId, e.dataId, true) // 最后一个参数 不修改状态
        },
        // 反馈面试结果
        markRes(e) {
            this.$refs.resDrawer.show(e.id, e.userId)
        },
        // 录用
        employShow(e) {
            this.$refs.employDrawer.show(e.name, e.userId, e.jobId, e.componyId, e.id)
        },
        // 分页数据
        getList() {
            this.listLoading = true
            getUserListInfo(this.listQuerytrue).then((response) => {
                this.list = response.result.records
                this.total = response.result.total
                this.listLoading = false
            })
        },
        // 搜索
        handleFilter() {
            this.listQuerytrue.jobId = ''
            this.listQuerytrue.pageNo = 1
            if (this.filterListQuery()) {
                this.getList()
            }
        },
        filterListQuery() {
            const n = this.listQuery
            if (n.experience) {
                this.listQuerytrue.minWorkYear = n.experience.split(',')[0]
                this.listQuerytrue.maxWorkYear = n.experience.split(',')[1]
            } else {
                this.listQuerytrue.minWorkYear = ''
                this.listQuerytrue.maxWorkYear = ''
            }
            if (n.salary) {
                this.listQuerytrue.minMoney = n.salary.split(',')[0]
                this.listQuerytrue.maxMoney = n.salary.split(',')[1]
            } else {
                this.listQuerytrue.minMoney = ''
                this.listQuerytrue.maxMoney = ''
            }
            for (var k in n) {
                this.listQuerytrue[k] = n[k]
            }
            n.workIndustry.length ? this.listQuerytrue.workIndustry = n.workIndustry.join(',') : this.listQuerytrue.workIndustry = ''
            delete this.listQuerytrue.experience
            delete this.listQuerytrue.salary
            if (parseInt(this.listQuerytrue.minAge) > parseInt(this.listQuerytrue.maxAge)) {
                this.$message.error('请填写正确的年龄范围！')
                return false
            }
            return true
        },
        delMultiple() {
            const selected = this.$refs['table'].selection
            var selected_arr = []
            selected.forEach(item => {
                selected_arr.push(item.dataId)
            })
            this.$confirm('此操作将永久删除这些数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.delAction(selected_arr.join(','))
                // this.list.splice(index, 1)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        downLoadItem(row) {
            this.exportResumeAction({userId: row.userInfo.userId})
        },
        exportResume() {
            const ids = [];
            const selected = this.$refs.table.selection
            selected.forEach(item => {
                ids.push(item.userInfo.userId)
            })
            let parms = null
            if (ids.length) {
                parms = {userId: ids.join(',')}
            } else {
                this.filterListQuery()
                parms = this.listQuerytrue
            }
            this.exportResumeAction(parms)
        },
        exportResumeAction(parms) {
            exportTalentList(parms).then(response => {
                window.open(`${process.env.VUE_APP_BASE_API}/en/download/resume/export?secret=${response.result}`)
            })
        },
        exportExcel() {
            const ids = [];
            const selected = this.$refs.table.selection
            selected.forEach(item => {
                ids.push(item.userInfo.userId)
            })
            let parms = null
            if (ids.length) {
                parms = {userId: ids.join(',')}
            } else {
                this.filterListQuery()
                parms = this.listQuerytrue
            }
            exportTalentList(parms).then(response => {
                window.open(`${process.env.VUE_APP_BASE_API}/en/enExcel/exportData?id=${response.result}`)
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.operation {
    cursor: pointer;
}
</style>
